/**
 * Created by zhangqiang on 16/12/27
 */
import RichText from "../components/RichText.js";
import Img from "../components/Img";
import TipNum from "../components/TipNum";
import {shopping} from "../const/shopping.js";

import {merchant} from "../const/merchant.js";

const lf = liefeng,
    R = React,
    RC = React.createClass,
    log = lf.utils.log,
    ajax = lf.utils.ajax,
    api = merchant.api,
    doAction = lf.bridgeJs.doAction,
    fmt = 'yyyy-MM-dd hh:mm:ss',
    imgPre = '../public/images/finger/',
    formatTime = lf.utils.format;

let menuDate = [
    {
        today:12,
        text: '今天收益(元)',
        code: 'TODAY',
        color: 'pink',
        type: 'text',
    },{
        today:12,
        text: '本月收益(元)',
        code: 'MONTH',
        color: 'pink',
        type: 'text',
    },{
        today:12,
        text: '今日订单',
        code: 'ORDER-TODAY',
        color: 'green',
        type: 'text',
    },{
        today:12,
        text: '全部订单',
        code: 'ORDER-MONTH',
        color: 'green',
        type: 'text',
    },
];

const orderQueryItems = [{
    icon: 'icon-queren alifont',
    iconType: 'lf-icon',
    text: '待确认',
   // url: PAGE.pendingOrder,
    numPrefix: 'pending',
    tip: 'CONFIRMED',
    code: 'confirm',
}, {
    icon: 'icon-huoche alifont',
    iconType: 'lf-icon',
    text: '待发货',
    //url: PAGE.shippingOrder,
    numPrefix: 'shipping',
    tip: 'BACKORDER',
    code: 'deliver',
}, {
    icon: 'icon-daishouhuo alifont',
    iconType: 'lf-icon',
    text: '待收货',
    numPrefix: 'notEvaluated',
   // url: PAGE.unevaluatedOrder,
    tip: 'RECEIVED',
    code: 'receipt',
},{
    icon: 'icon-tuikuan alifont',
    iconType: 'lf-icon',
    text: '退款/售后',
    numPrefix: 'notEvaluated',
    // url: PAGE.unevaluatedOrder,
    tip: 'AFTER',
    code: 'refund',
},];

const service = [
    {
        num: 'AUDIT',
        text: '审核中',
        code: 'audit',
    }, {
        num: 'SEll',
        text: '出售中',
        code: 'sale',
    }, {
        num: 'WAREHOUSE',
        text: '仓库中',
        code: 'warehouse',
    },
];

const Header = RC({
    getInitialState() {
        return {
            data:'',
        }
    },
    information(){
        let me = this;
        ajax({///获得商铺基本信息
            url: api.prefix + api.information,
            data: {
                supplierId:21,
            },
            success(data) {
                if(data.code!=200) return
                me.setState({
                    data: data.data,
                })
            }
        });
    },
    componentWillMount() {
        this.information()
    },
    componentDidMount() {
        var toMeProfile = R.findDOMNode(this.refs.toMeProfile);
        $(toMeProfile).on('tap', function () {
            doAction('store-restaurant.html', '某某餐厅')
        })
    },
    render: function () {
        let user = this.props.user || {},
            data = this.state.data;
        return (
            <header className="header mui-table-view mui-table-view-chevron">
                <a href="javascript:;" className="mui-navigate-right choose-line" id="toMeProfile"
                   ref="toMeProfile">
                    <div className="header-info">
                        <div className="avatar">
                            <img src={user.avatarUrl || '../public/images/common/none.png'}/>
                        </div>
                        <div className="full">
                            <p><span>{data.supplierName}</span><span>{user.nickName || (user.custLoginVo && user.custLoginVo.nickName) || user.name || (user.customer && user.customer.realName)}</span></p>
                            <p>商家验证</p>
                        </div>
                        <p className="name"></p>
                    </div>
                </a>
            </header>
        )
    }
});

const Menu = RC({
    getInitialState() {
        return {
            count:'',
        }
    },
    componentDidMount(){
        let $listPage = $('.list');
        var me = this;
        $listPage.each(function (i) {
            var $me = $(this);
            $me.off();
            $me.on('tap', function () {
                let code = me.props.menuDate[i].code;
                console.log(code)
                if (code == 'TODAY')
                    doAction('store-list-census.html?type=' + 'TODAY', '每日账单');

                if (code == 'MONTH')
                    doAction('store-list-census.html?type=' + 'MONTH', '月结账单');

                if (code == 'ORDER-TODAY')
                    doAction('store-order.html?type=' + 'ORDER-TODAY', '订单');

                if (code == 'ORDER-MONTH')
                    doAction('store-all-order.html?type=' + 'ORDER-MONTH', '全部订单');

            });
        })
    },
    componentWillMount () {
        var user = this.props.user,
            me = this;
        this.resetNum();
        // lf.appJs.getUser(function (user) {
        //     me.resetNum(user);
        // });
    },
    resetNum: function () {
        var me = this;
        //获取店铺订单数量
        ajax({
            url: api.prefix + api.lierOrderDetail,
            data: {
                supplierId:21,
            },
            success(res) {
                if(res.code!=200)return
                me.setState({
                    count: res.data,
                });
            }
        });
    },
    render(){
        let item2DArray = lf.utils.to2DArray(this.props.menuDate || [], 2);
        let menuDate = item2DArray.map((array, i) => {
            return (
                <div key={'array' + i} className="item-row">
                    {
                        array.map(menu => {
                            return <div key={menu.id} className="item list">
                                <div>
                                        <span className={menu.color}>
                                            {this.getNum(menu.code)}
                                        </span>
                                    <p className={menu.type}>{menu.text}</p>
                                </div>
                            </div>
                        })
                    }
                </div>
            );
        });

        return(<div>
                   <div className="box">
                       {menuDate}
                   </div>
                   <LinkBox orderQueryItems = {orderQueryItems} count = {this.state.count}/>
                    <p className="mui-table-view-cell commodity">商品管理</p>
                    <Service service = {service} count={this.state.count}/>
              </div>
       )
    },
    getNum(code){
        let num,
            count = this.state.count;

        if(code == 'TODAY'){
            num = count.supplierTodayIncome;
        }
        if(code == 'MONTH'){
            num = count.supplierMonthIncome;
        }
        if(code == 'ORDER-TODAY'){
            num = count.todayOrderCount;
        }
        if(code == 'ORDER-MONTH'){
            num = count.totalOrderCount;
        }
        return num;
    }
})

let LinkBox = RC({
    componentDidMount(){
        let $menuList = $('.menuList');
        var me = this;
        $menuList.each(function (i) {
            var $me = $(this);
            $me.off();
            $me.on('tap', function () {
                let code = me.props.orderQueryItems[i].code;
                    console.log(code)
                if (code == 'confirm')
                    doAction('store-confirmation.html?type=' + 'CONFIRM', '待确认');

                if (code == 'deliver')
                    doAction('store-deliver.html?type=' + 'FEEDBACK', '待发货');

                if (code == 'receipt')
                    doAction('store-received.html?type=' + 'CHECK', '待收货');

                if (code == 'refund')
                    doAction('store-service.html?type=' + 'RETURN', '退款/售后');
            });
        })
    },
    tipNum(tip){
        let num,
        count = this.props.count;

        if(tip == 'CONFIRMED') num = count.toBeConfirmedOrderCount||0;//待确认

        if(tip == 'BACKORDER') num = count.backOrderCount||0;//待发货

        if(tip == 'RECEIVED') num = count.toBeReceivedOrderCount||0;//待发货

        if(tip == 'AFTER') num = count.afterSaleOrdersCount||0;//待退货

        return num;
    },
    render(){
        let orderQueryItems = this.props.orderQueryItems.map((e,i)=>{
            return(
                <a href="javascript:;" className="flex-item flex col menuList">
                    <TipNum num = {this.tipNum(e.tip)}/>
                    <i className={'lf-icon '+ e.icon}></i>
                    <span className="text">{e.text}</span>
                    <noscript></noscript>
                </a>
            )
        })
        return(
            <div>
                <div className="order-query-items flex border-bottom">
                    {orderQueryItems}
                </div>
            </div>
        )
    }
})

let Service = RC({
    componentDidMount(){
        let $management = $('.management');
        var me = this;
        $management.each(function (i) {
            var $me = $(this);
            $me.off();
            $me.on('tap', function () {
                let code = me.props.service[i].code;
                console.log(code)
                if (code == 'audit')
                    doAction('store-list-audit.html?type=' + 'audit', '审核中');

                if (code == 'sale')
                    doAction('store-sale.html?type=' + 'sale', '出售中');

                if (code == 'warehouse')
                    doAction('store-warehouse.html', '仓库中');

            });
        })
    },
    administration(quantity){
        let amount,
            count = this.props.count;
        if(quantity == 'AUDIT') amount = count.supplierReviewGoodsCount||0;//待审核

        if(quantity == 'SEll') amount = count.supplierSaleGoodsCount||0;//出售中

        if(quantity == 'WAREHOUSE') amount = count.supplierStoreGoodsCount||0;//仓库中

        return amount;
    },
    render(){
        let orderQueryItems = this.props.service.map((e,i)=>{
            return(
                <a href="javascript:;" className="flex-item flex col management">
                    <p className="">{this.administration(e.num)}</p>
                    <span className="text">{e.text}</span>
                    <noscript></noscript>
                </a>
            )
        })

        return(
            <div>
                <div className="order-query-items flex border-bottom">
                    {orderQueryItems}
                </div>
            </div>
        )
    }
})

const Root = RC({
    getInitialState() {
        return {}
    },
    componentDidMount() {
        
    },
    render() {
        return <div className="store-index">
                    <Header user={this.props.user}/>
                    <Menu menuDate = {menuDate}/>
                </div>
           }
});

lf.appJs.getUser(function (user) {
    R.render(<Root user={user}/>, document.getElementById('root'),
        function () {
            $('#root').css({
                'background-color': '#ededed',
                //'margin-bottom': '.3rem', //与底部撑开
                 'height': '100vh'
            });
            $('.order-query-items').eq(1).css({'margin-top':'0'})

        }
    );
});